<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
            <!-- 第一个card -->
            <Detail title="总销售额" count="￥ 126560">
                <template slot="charts">
                    <span>周同比&nbsp;&nbsp;&nbsp;56.67% <svg t="1684404276424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3692" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="3693"></path></svg></span>
                    <span>日同比&nbsp;&nbsp;&nbsp;19.96% <svg t="1684404421319" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4819" width="16" height="16"><path d="M512 597.333333l-170.666667-170.666666h341.333334l-170.666667 170.666666z" p-id="4820" fill="#1afa29"></path></svg></span>
                </template>
                <template slot="footer">
                    <span>日销售额￥ 12423</span>
                </template>
            </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
            <!-- 第二个card -->
            <Detail title="访问量" count="88460">
                <template slot="charts">
                    <lineCharts></lineCharts>
                </template>
                <template slot="footer">
                    <span>日访问量 1234</span>
                </template>
            </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
            <!-- 第三个card -->
            <Detail title="支付笔数" count="88460">
                <template slot="charts">
                    <barCharts></barCharts>
                </template>
                <template slot="footer">
                    <span>转化率 64%</span>
                </template>
            </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
            <!-- 第四个card -->
            <Detail title="运营活动效果" count="￥ 78%">
                <template slot="charts">
                    <progressCharts></progressCharts>
                </template>
                <template slot="footer">
                    <span>周同比&nbsp;&nbsp;&nbsp;12% <svg t="1684404276424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3692" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="3693"></path></svg></span>
                    <span>日同比&nbsp;&nbsp;&nbsp;11% <svg t="1684404421319" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4819" width="16" height="16"><path d="M512 597.333333l-170.666667-170.666666h341.333334l-170.666667 170.666666z" p-id="4820" fill="#1afa29"></path></svg></span>
                </template>
            </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import Detail from './Detail';
import lineCharts from './lineChart'
import barCharts from './barChart'
import progressCharts from './progressChart'
  export default {
    name: '',
    components: {
        Detail,
        lineCharts,
        barCharts,
        progressCharts
    }
  }
</script>

<style>

</style>